
<template>
     <h1>v3数据：{{count}}</h1>
     <h1>v3计算属性：{{countDou}}</h1>
     <button @click="toCount">v3加1 </button>
</template>
<script >
  import {ref,computed} from 'vue'
  export default {
    setup(){
        // Vue3 的非语法糖写法 都写在setup 
        // setup要有return 返回数据 计算属性 方法 等等
        // setup 组件执行的函数， 替代了beforeCreate created beforeMount 

        // vue3 创建响应式数据的方式1 ref 
        let count=ref(1);
        // vue3的函数和事件函数等 都写成基本的箭头函数
        let toCount=()=>{
          //  ref 在js操作获取值 和赋值都要加.value 
          console.log(count.value )
          count.value++
        }
        // v3的计算属性 computed
        let countDou=computed(()=>{
          return  count.value*5
        })

        return {
          count,
          toCount,
          countDou
        }
    }
  }
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
